<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const showLogin = ref(false)
const showRegister = ref(false)
const isNavScrolled = ref(false)
const mousePosition = ref({ x: 0, y: 0 })
const lastMousePosition = ref({ x: 0, y: 0 })

// 处理登录注册相关逻辑
const handleLogin = () => {
  showLogin.value = true
}

const handleRegister = () => {
  showRegister.value = false
}

const handleCloseModal = () => {
  showLogin.value = false
  showRegister.value = false
}

// 处理导航栏滚动效果
const handleScroll = () => {
  isNavScrolled.value = window.scrollY > 50
}

// 创建鼠标轨迹粒子 - 增强版本
const createTrailParticle = (x, y) => {
  // 直接在主容器中创建粒子，而不是body
  const container = document.querySelector('.home-container')
  if (!container) return
  
  const particle = document.createElement('div')
  particle.classList.add('trail-particle')
  
  // 使用明亮的黄色和金色，确保在深色背景上非常明显
  const size = Math.random() * 20 + 10 // 超大粒子10-30px
  const hue = Math.random() * 30 + 40 // 金色到黄色范围
  const brightness = 95 + Math.random() * 15 // 极高亮度
  
  // 设置所有必要的样式
  Object.assign(particle.style, {
    position: 'fixed',
    width: `${size}px`,
    height: `${size}px`,
    left: `${x}px`,
    top: `${y}px`,
    backgroundColor: `hsla(${hue}, 100%, ${brightness}%, 1)`,
    boxShadow: `0 0 ${size * 8}px hsla(${hue}, 100%, ${brightness - 10}%, 1)`,
    borderRadius: '50%',
    transform: 'translate(-50%, -50%)',
    pointerEvents: 'none',
    zIndex: '99999',
    animation: 'particle-pulse 0.5s ease-in-out',
    opacity: '1'
  })
  
  container.appendChild(particle)
  
  // 动画结束后移除粒子
  setTimeout(() => {
    Object.assign(particle.style, {
      opacity: '0',
      transform: `translate(-50%, -50%) translateY(-60px) scale(1.2)`,
      transition: 'opacity 1.5s ease, transform 1.5s ease'
    })
    
    setTimeout(() => {
      if (container.contains(particle)) {
        container.removeChild(particle)
      }
    }, 1500)
  }, 10)
}

// 处理鼠标跟随效果
let lastMoveTime = 0
const handleMouseMove = (e) => {
  const now = Date.now()
  
  // 更新鼠标位置
  lastMousePosition.value = { ...mousePosition.value }
  mousePosition.value = {
    x: e.clientX,
    y: e.clientY
  }
  
  // 极高频率生成粒子，每次鼠标移动都生成多个
  if (now - lastMoveTime > 5) {
    // 生成5个粒子，分布更广
    for (let i = 0; i < 5; i++) {
      const offsetX = (Math.random() - 0.5) * 20
      const offsetY = (Math.random() - 0.5) * 20
      createTrailParticle(e.clientX + offsetX, e.clientY + offsetY)
    }
    lastMoveTime = now
  }
}

// 处理鼠标悬停到特殊元素
const handleElementHover = (e) => {
  const target = e.target
  
  // 为卡片和按钮添加额外的粒子效果
  if (target.closest('.interactive-card') || target.closest('.pulse-button')) {
    const rect = target.getBoundingClientRect()
    const centerX = rect.left + rect.width / 2
    const centerY = rect.top + rect.height / 2
    
    // 创建多个粒子
    for (let i = 0; i < 8; i++) {
      setTimeout(() => {
        const angle = (i / 8) * Math.PI * 2
        const radius = rect.width / 4
        const x = centerX + Math.cos(angle) * radius
        const y = centerY + Math.sin(angle) * radius
        createTrailParticle(x, y)
      }, i * 50)
    }
  }
}

// 页面元素进入动画效果
const triggerElementAnimations = () => {
  const animatedElements = document.querySelectorAll('.animate-on-scroll')
  
  animatedElements.forEach(el => {
    const elementTop = el.getBoundingClientRect().top
    const windowHeight = window.innerHeight
    
    if (elementTop < windowHeight * 0.85) {
      el.classList.add('animate-in')
    }
  })
}

// 生成初始页面粒子
const generateInitialParticles = () => {
  // 在页面中心区域生成30个随机粒子，确保用户一进入页面就能看到效果
  const container = document.querySelector('.home-container')
  if (!container) return
  
  for (let i = 0; i < 30; i++) {
    const x = window.innerWidth / 2 + (Math.random() - 0.5) * 300
    const y = window.innerHeight / 2 + (Math.random() - 0.5) * 300
    createTrailParticle(x, y)
  }
}

// 生命周期钩子
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  window.addEventListener('mousemove', handleMouseMove)
  window.addEventListener('scroll', triggerElementAnimations)
  
  // 添加鼠标悬停事件监听
  document.addEventListener('mouseover', handleElementHover)
  
  // 初始触发一次动画检查
  nextTick(() => {
    triggerElementAnimations()
    // 页面加载后立即生成初始粒子
    generateInitialParticles()
    
    // 添加定时器，每3秒自动生成一批粒子，确保页面始终有动态效果
    setInterval(() => {
      const centerX = window.innerWidth / 2
      const centerY = window.innerHeight / 2
      for (let i = 0; i < 5; i++) {
        createTrailParticle(
          centerX + (Math.random() - 0.5) * 200,
          centerY + (Math.random() - 0.5) * 200
        )
      }
    }, 3000)
  })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('mousemove', handleMouseMove)
  window.removeEventListener('scroll', triggerElementAnimations)
  document.removeEventListener('mouseover', handleElementHover)
  
  // 清理所有轨迹粒子
  document.querySelectorAll('.trail-particle').forEach(particle => {
    particle.remove()
  })
})
</script>

<template>
  <div class="home-container" :style="{ '--mouse-x': mousePosition.x + 'px', '--mouse-y': mousePosition.y + 'px' }">
    <!-- 鼠标跟随光晕效果 -->
    <div class="mouse-glow"></div>
    <!-- 导航栏 -->
    <nav class="navbar" :class="{ 'navbar-scrolled': isNavScrolled }">
      <div class="navbar-content">
        <div class="logo">
          <a href="/" class="logo-link">首页</a>
        </div>
        
        <div class="nav-links">
          <a href="/" class="nav-link">游戏特色</a>
          <a href="/" class="nav-link">式神录</a>
          <a href="/" class="nav-link">视听中心</a>
          <a href="/" class="nav-link">玩家社区</a>
          <a href="/profile" class="nav-link">用户中心</a>
          <a href="/recharge" class="nav-link">游戏充值</a>
        </div>
        
        <div class="auth-buttons">
          <button class="login-btn" @click="handleLogin">登录</button>
          <button class="register-btn" @click="handleRegister">注册</button>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 顶部横幅 -->
      <section class="hero-section">
        <div class="hero-content">
          <div class="event-banner">
            <div class="event-info">
              <h2>待宵姑获鸟 | 全新SSR阶式神降临</h2>
              <p>暗夜之中，姑获鸟化身为守护孩童的神秘存在，全新SSR阶式神「待宵姑获鸟」即将降临平安京！</p>
            </div>
            <button class="experience-btn pulse-button">立即体验</button>
          </div>
        </div>
      </section>

      <!-- 特色玩法 -->
      <section class="features-section animate-on-scroll">
        <h2 class="section-title">◆ 特色玩法 ◆</h2>
        
        <div class="features-grid">
          <div class="feature-card interactive-card">
            <div class="feature-icon icon-hover">
              <img src="/yys-images/feature1.svg" alt="和风世界" />
            </div>
            <h3>和风世界</h3>
            <p>平安时代的奇幻世界，百鬼夜行，沉浸式体验日本传统妖怪文化</p>
          </div>
          
          <div class="feature-card interactive-card">
            <div class="feature-icon icon-hover">
              <img src="/yys-images/feature2.svg" alt="百鬼集结" />
            </div>
            <h3>百鬼集结</h3>
            <p>超过百种形态各异的式神，收集、培养、组合打造专属阵容</p>
          </div>
          
          <div class="feature-card interactive-card">
            <div class="feature-icon icon-hover">
              <img src="/yys-images/feature3.svg" alt="策略对战" />
            </div>
            <h3>策略对战</h3>
            <p>丰富的战斗策略，搭配不同的式神技能，体验多样化的战斗乐趣</p>
          </div>
          
          <div class="feature-card interactive-card">
            <div class="feature-icon icon-hover">
              <img src="/yys-images/feature4.svg" alt="社交互动" />
            </div>
            <h3>社交互动</h3>
            <p>与好友组队挑战，加入阴阳寮，共同探索平安京的奥秘</p>
          </div>
        </div>
      </section>

      <!-- 游戏场景展示 -->
      <section class="scenes-section animate-on-scroll">
        <div class="scenes-container">
          <div class="scene-item parallax-item">
            <div class="scene-overlay"></div>
            <img src="/yys-images/yys-main1.svg" alt="游戏场景1" />
          </div>
          <div class="scene-item parallax-item">
            <div class="scene-overlay"></div>
            <img src="/yys-images/yys-main2.svg" alt="游戏场景2" />
          </div>
        </div>
      </section>

      <!-- 最新活动 -->
      <section class="events-section animate-on-scroll">
        <h2 class="section-title">◆ 最新活动 ◆</h2>
        
        <div class="events-grid">
          <div class="event-card interactive-card">
            <div class="event-image pulse-border">
              <img src="/images/event-banner.svg" alt="活动1" />
            </div>
            <div class="event-details">
              <h3>春樱盛开</h3>
              <p>参与活动收集樱花，兑换限定皮肤和丰厚奖励</p>
              <span class="event-time">剩余时间：7天</span>
            </div>
          </div>
          
          <div class="event-card interactive-card">
            <div class="event-image pulse-border">
              <img src="/images/new-character.svg" alt="活动2" />
            </div>
            <div class="event-details">
              <h3>新式神降临</h3>
              <p>待宵姑获鸟限时召唤，提升SSR/SR概率</p>
              <span class="event-time">剩余时间：3天</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 底部下载 -->
      <section class="download-section">
        <div class="download-content">
          <h2>立即下载游戏</h2>
          <p>加入平安京的奇幻世界，开启百鬼物语</p>
          <div class="download-buttons">
            <button class="download-btn ios pulse-button">iOS下载</button>
            <button class="download-btn android pulse-button">Android下载</button>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-links">
          <a href="/" class="footer-link">关于我们</a>
          <a href="/" class="footer-link">隐私政策</a>
          <a href="/" class="footer-link">用户协议</a>
          <a href="/" class="footer-link">联系客服</a>
        </div>
        <p class="copyright">© 2025 网易游戏 版权所有</p>
      </div>
    </footer>

    <!-- 登录注册弹窗 -->
    <LoginModal v-if="showLogin" @close="handleCloseModal" @switch-to-register="() => { showLogin.value = false; showRegister.value = true }" />
    <RegisterModal v-if="showRegister" @close="handleCloseModal" @switch-to-login="() => { showRegister.value = false; showLogin.value = true }" />
  </div>
</template>

<style scoped>
/* 创建固定的背景层，置于所有内容下方 */
.home-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a0a2a 0%, #1a1a4a 50%, #0a0a2a 100%);
  background-size: cover;
  background-position: center;
  z-index: -1;
  opacity: 0.8; /* 增加背景渐变透明度 */
}



/* 主容器样式 */
.home-container {
  min-height: 100vh;
  position: relative;
  color: var(--text-primary);
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent; /* 确保容器背景透明 */
}

@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.6; }
}

/* 导航栏样式 */
.navbar {
  background: rgba(10, 10, 42, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 1rem 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 导航栏滚动效果 */
.navbar.navbar-scrolled {
  background: rgba(10, 10, 42, 0.95);
  padding: 0.75rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(212, 175, 55, 0.5);
}

.navbar-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.logo-link {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--gold-primary);
  text-decoration: none;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 0;
}

.nav-link:hover {
  color: var(--gold-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-buttons {
  display: flex;
  gap: 1rem;
}

.login-btn, .register-btn {
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--gold-primary);
  background: transparent;
  color: var(--gold-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 按钮悬停效果 */
.login-btn::before, .register-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
  transition: all 0.5s ease;
  z-index: -1;
}

.login-btn:hover::before, .register-btn:hover::before {
  left: 100%;
}

.login-btn:hover {
  background: rgba(212, 175, 55, 0.1);
}

.register-btn {
  background: var(--gold-primary);
  color: var(--bg-darker);
}

.register-btn:hover {
  background: var(--gold-secondary);
  border-color: var(--gold-secondary);
}

/* 主要内容区域 - 合并所有样式，确保优先级和区分效果 */
.main-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  /* 高不透明度的背景，确保与页面背景有明显区分 */
  background: rgba(10, 10, 42, 0.9);
  /* 更强烈的模糊效果 */
  backdrop-filter: blur(15px) !important;
  /* 明显的圆角 */
  border-radius: 16px;
  /* 金色渐变边框 */
  border: 3px solid var(--gold-primary) !important;
  border-image: linear-gradient(45deg, var(--gold-primary), var(--gold-secondary), var(--gold-primary)) 1;
  /* 强烈的阴影效果 */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8),
              0 0 60px rgba(212, 175, 55, 0.5),
              inset 0 0 30px rgba(212, 175, 55, 0.1);
  /* 添加内部发光效果 */
  outline: 1px solid rgba(212, 175, 55, 0.3);
  /* 背景图案 */
  background-image: 
    radial-gradient(circle at 10% 10%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
    linear-gradient(to bottom, transparent 0%, rgba(10, 10, 42, 0.3) 100%);
  background-size: 100% 100%;
  background-position: center;
  /* 强制覆盖可能的其他样式 */
  overflow: visible;
}

/* 在内容区域添加明显的顶部和底部装饰元素 */
.main-content::before,
.main-content::after {
  content: '✧ ✧ ✧ ✧ ✧';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold-primary);
  font-size: 24px;
  text-shadow: 0 0 15px rgba(212, 175, 55, 1);
  white-space: nowrap;
  letter-spacing: 15px;
  z-index: 10;
  animation: twinkle 2s infinite;
}

.main-content::before {
  top: -30px;
}

.main-content::after {
  bottom: -30px;
}

/* 四个角的装饰元素 */
.main-content::before,
.main-content::after {
  z-index: 10;
}

/* 添加四个角装饰元素的HTML结构 */
.main-content {
  counter-reset: corner-decoration;
}

/* 简化方法：通过增强自身样式来实现明显的背景区分 */
.main-content {
  /* 确保定位正确 */
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 3rem;
  /* 使用极高不透明度的背景色，几乎完全不透明 */
  background: rgba(10, 10, 42, 0.95);
  /* 强烈的模糊效果 */
  backdrop-filter: blur(20px);
  /* 明显的圆角 */
  border-radius: 20px;
  /* 双重边框效果：内部金色边框 + 外部发光边框 */
  border: 3px solid var(--gold-primary);
  /* 多层强烈阴影，确保视觉突出 */
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(212, 175, 55, 0.6),
    0 0 80px rgba(212, 175, 55, 0.3),
    inset 0 0 20px rgba(212, 175, 55, 0.1);
  /* 添加内部发光效果 */
  outline: 2px solid rgba(212, 175, 55, 0.4);
  /* 使用更明显的背景图案 */
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.3) 0%, transparent 50%);
  background-size: 100% 100%;
  background-position: center;
  /* 强制覆盖其他可能的样式 */
  overflow: visible;
}

/* 添加顶部和底部的金色装饰条 */
.main-content::before,
.main-content::after {
  content: '';
  position: absolute;
  left: 5%;
  right: 5%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  z-index: 10;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.8);
}

.main-content::before {
  top: -10px;
}

.main-content::after {
  bottom: -10px;
}

/* 鼠标跟随光晕效果 - 使用金色，确保在深色背景上极其明显 */
.mouse-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, rgba(255, 165, 0, 0.4) 50%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 99999 !important; /* 强制最上层 */
  transition: transform 0.1s ease-out, opacity 0.3s ease;
  opacity: 1;
  backdrop-filter: blur(25px);
  left: calc(var(--mouse-x, 0px) - 300px);
  top: calc(var(--mouse-y, 0px) - 300px);
  animation: glow-pulse 1.5s infinite alternate;
  box-shadow: 0 0 150px rgba(255, 215, 0, 0.7); /* 强烈的外部光晕 */
}

/* 光晕脉冲动画 */
@keyframes glow-pulse {
  0% {
    filter: hue-rotate(0deg);
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    filter: hue-rotate(30deg);
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* 鼠标轨迹粒子样式 - 强制使用内联样式，确保样式优先应用 */
.trail-particle {
  position: fixed !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 99999 !important; /* 强制最上层 */
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  animation: particle-float 1.2s ease-in-out forwards !important;
  will-change: transform, opacity !important;
  box-sizing: content-box !important;
}

@keyframes particle-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) translateY(-20px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-50px) scale(0.8);
  }
}

/* 粒子脉冲动画 */
@keyframes particle-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
}

/* 元素进入动画基础样式 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 脉冲按钮效果 */
.pulse-button {
  position: relative;
  overflow: visible;
}

.pulse-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.pulse-button:hover::after {
  width: 300px;
  height: 300px;
  opacity: 0;
}

/* 互动卡片效果增强 */
.interactive-card {
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.interactive-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.8s ease;
  z-index: 0;
}

.interactive-card:hover::before {
  left: 100%;
}

.interactive-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  border-color: var(--gold-primary);
}

/* 图标悬停效果 */
.icon-hover {
  transition: transform 0.3s ease;
}

.icon-hover:hover {
  transform: scale(1.2) rotate(5deg);
}

/* 场景图片视差和叠加效果 */
.parallax-item {
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease;
}

.parallax-item:hover {
  transform: scale(1.03);
}

.scene-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(70, 130, 180, 0.3) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.parallax-item:hover .scene-overlay {
  opacity: 1;
}

/* 脉冲边框效果 */
.pulse-border {
  position: relative;
}

.pulse-border::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px solid var(--gold-primary);
  border-radius: inherit;
  animation: pulse-border 2s infinite;
  opacity: 0;
}

@keyframes pulse-border {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: scale(1.05);
    opacity: 0;
  }
}

/* 增强标题效果 */
.section-title {
  text-align: center;
  color: var(--gold-primary);
  margin-bottom: 2.5rem;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.section-title::before,
.section-title::after {
  content: '✧';
  color: var(--gold-primary);
  opacity: 0.7;
  margin: 0 15px;
}

/* 增强按钮效果 */
.experience-btn,
.download-btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;
}

.experience-btn:hover,
.download-btn:hover {
  box-shadow: 0 8px 25px rgba(70, 130, 180, 0.6), 0 0 15px rgba(212, 175, 55, 0.4);
  transform: translateY(-3px);
}

/* 顶部横幅 */
.hero-section {
  margin-bottom: 4rem;
}

.hero-content {
  display: flex;
  justify-content: center;
}

.event-banner {
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--gold-primary);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  max-width: 900px;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
  position: relative;
  overflow: hidden;
}

.event-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
  animation: shine 3s infinite;
}

@keyframes shine {
  100% { left: 100%; }
}

.event-info h2 {
  color: var(--gold-primary);
  margin-bottom: 1rem;
  font-size: 1.8rem;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.event-info p {
  color: var(--text-primary);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.experience-btn {
  background: linear-gradient(135deg, var(--blue-light), var(--blue-mid));
  border: none;
  color: white;
  padding: 1rem 3rem;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(70, 130, 180, 0.4);
}

.experience-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(70, 130, 180, 0.6);
}

/* 特色玩法 */
.features-section {
  margin-bottom: 4rem;
}

.section-title {
  text-align: center;
  color: var(--gold-primary);
  margin-bottom: 2.5rem;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: rgba(26, 26, 74, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: var(--gold-primary);
}

.feature-icon {
  margin-bottom: 1.5rem;
}

.feature-icon img {
  width: 80px;
  height: 80px;
}

.feature-card h3 {
  color: var(--gold-primary);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.feature-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 游戏场景展示 */
.scenes-section {
  margin-bottom: 4rem;
}

.scenes-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2rem;
}

.scene-item {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.scene-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  border-color: var(--gold-primary);
}

.scene-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* 最新活动 */
.events-section {
  margin-bottom: 4rem;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.event-card {
  background: rgba(26, 26, 74, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: var(--gold-primary);
}

.event-image {
  height: 200px;
  overflow: hidden;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.event-card:hover .event-image img {
  transform: scale(1.05);
}

.event-details {
  padding: 1.5rem;
}

.event-details h3 {
  color: var(--gold-primary);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.event-details p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.event-time {
  display: inline-block;
  background: rgba(212, 175, 55, 0.2);
  color: var(--gold-primary);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* 底部下载 */
.download-section {
  text-align: center;
  margin-bottom: 3rem;
}

.download-content {
  background: rgba(26, 26, 74, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 3rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.download-content h2 {
  color: var(--gold-primary);
  margin-bottom: 1rem;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.download-content p {
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.download-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.download-btn {
  background: var(--gold-primary);
  border: none;
  color: var(--bg-darker);
  padding: 1rem 2.5rem;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.download-btn:hover {
  background: var(--gold-secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

.download-btn.ios {
  background: linear-gradient(135deg, #007aff, #0051d5);
  color: white;
}

.download-btn.ios:hover {
  background: linear-gradient(135deg, #007aff, #003a99);
}

/* 页脚 */
.footer {
  background: rgba(10, 10, 42, 0.85);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  padding: 2rem 0;
  position: relative;
  z-index: 1;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--gold-primary);
}

.copyright {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar-content {
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .features-grid,
  .scenes-container,
  .events-grid {
    grid-template-columns: 1fr;
  }
  
  .scene-item {
    max-width: 100%;
  }
  
  .event-card {
    max-width: 100%;
  }
  
  .download-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .download-btn {
    width: 100%;
    max-width: 300px;
  }
}
</style>
